<template>
  <el-input
      v-model="form.qrcodeText"
      :rows="5"
      type="textarea"
      placeholder="请输入二维码内容"
  />
  <el-button style="margin: .5rem 0" type="primary" @click="generateQRCode">生成</el-button>
  <canvas ref="qrcodeCanvas"></canvas>
</template>

<script>
import {ref,unref, getCurrentInstance, watch, reactive, onMounted} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from "vue-router";

import QRCode from 'qrcode'
export default {
  name: "index",
  components:{

  },
  setup(props ,content){
    const router = useRouter()
    const {proxy} = getCurrentInstance();

    const qrcodeCanvas = ref()
    let data = {
      form: ref({}),
      loading: ref(false),
    }
    //监听
    watch(() => [props.info], ([newInfo],[oldInfo]) => {

    })
    onMounted(async () => {

    })
    let methods = {

      generateQRCode() {
        let form = data.form.value;

        qrcodeCanvas.value.getContext('2d').clearRect(0, 0, qrcodeCanvas.value.width, qrcodeCanvas.value.height);
        if (form.qrcodeText) {
          QRCode.toCanvas(qrcodeCanvas.value, form.qrcodeText, (error) => {
            if (error) console.error(error)
            console.log('二维码生成成功！')
          })
        }
      },
    }

    return {
      proxy,
      router,
      qrcodeCanvas,
      ...data,
      ...methods
    }
  }
}
</script>

<style lang="scss" scoped>

</style>